<template>
	<div class="users">
		<el-row>
			<!-- @keyup.native.enter="search"按下enter触发搜索，需要加native，因为这是组件，需要加个原生native进行处理 -->
			<el-input
				v-model="queryName"
				placeholder="搜索用户名"
				@keyup.native.enter="search"
				style="width: 200px"
			></el-input>
			<el-button
				icon="el-icon-search"
				type="primary"
				circle
				@click="search"
				style="margin-left: 20px"
			></el-button>
			<el-button type="primary" round @click="drawer = true"
				>添加用户</el-button
			>
		</el-row>
		<el-drawer
			title="添加用户"
			:visible.sync="drawer"
			:direction="direction"
			:wrapperClosable="false"
		>
			<addusers @addok="addok"></addusers>
		</el-drawer>
		<!--  width不给宽度会自适应 -->
		<el-table :data="tableData" style="width: 100%">
			<el-table-column label="创建日期">
				<template slot-scope="scope">
					<!-- 用作用域插槽和局部过滤器来修改时间格式 -->
					<div>{{ scope.row.create_time | getDate }}</div>
				</template>
			</el-table-column>
			<el-table-column prop="email" label="电子邮箱"> </el-table-column>
			<el-table-column prop="mobile" label="手机号"> </el-table-column>
			<el-table-column prop="role_name" label="角色名称"></el-table-column>
			<el-table-column prop="username" label="用户名"></el-table-column>
			<el-table-column fixed="right" label="操作" width="100" align="center">
				<template slot-scope="scope">
					<!-- 气泡确认框 包一下删除-->
					<el-popconfirm
						confirm-button-text="好的"
						cancel-button-text="不用了"
						icon="el-icon-info"
						icon-color="red"
						title="确定删除用户吗？"
						@confirm="del(scope.row)"
						@cancel="popCancel()"
						><el-button type="text" size="small" slot="reference"
							>删除</el-button
						>
					</el-popconfirm>

					<el-button type="text" @click="update(scope.row)" size="small"
						>&nbsp;&nbsp;修改</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<!-- page-sizes选择分页的条数的，page-size默认一页展示5条数据 total总条数 layout管理分页展示的样式内容-->
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="pagesize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
		>
		</el-pagination>
		<!-- 对话框表单 -->
		<el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item label="电子邮箱" label-width="120px">
					<!-- autocomplete 关闭自动提示之前的输入内容的功能 -->
					<el-input v-model="form.email" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="手机号码" label-width="120px">
					<el-input v-model="form.mobile" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

 <script>
	// import axios from "axios";
	import addusers from "@/components/AddUsers.vue";
	import { usersGet, usersDelete, usersPut } from "@/http/request.js";
	export default {
		name: "UsersView",
		components: {
			addusers,
		},
		// 当组件被激活的时候触发，也就是组件被点击到的时候触发
		activated() {
			console.log("激活了");
			// this.getTableData()
		},
		// 当离开组件的时候触发
		deactivated() {
			console.log("离开了");
		},
		data() {
			return {
				// 表格数据
				tableData: [],
				// 默认抽屉是关闭的
				drawer: false,
				// 抽屉打开方向，从右到左
				direction: "rtl",
				// 默认打开的是第一页的数据
				currentPage: 1,
				// 一页默认展示5条
				pagesize: 5,
				// 默认总条数是0
				total: 0,
				queryName: "",
				// 默认打开对话框
				dialogFormVisible: false,
				// 对话框表单中的内容
				form: {
					email: "",
					mobile: "",
				},
			};
		},
		// filters: {
		// 局部过滤器，全局的在main.js中写，局部的只能在当前页面使用，全局在每个页面都能使用
		// getDate(v) {
		// 	// 生成当前时间戳的日期对象
		// 	let oDate = new Date(v);
		// 	// 生成当前时间戳的年月日
		// 	return oDate.getFullYear()+'-'+oDate.getMonth()+1+'-'+oDate.getDate()
		// },
		// },
		created() {
			this.getTableData();
		},
		methods: {
			// 气泡弹出框点击取消
			popCancel() {
				console.log("123");
			},
			// 修改用户信息
			update(row) {
				// 把一行的信息给到form，为了获取id,修改信息，用深浅拷贝解决bug

				this.form = JSON.parse(JSON.stringify(row));
				this.dialogFormVisible = true;
			},
			// 提交用户信息submit
			async submit() {
				// 用try，catch防止请求失败造成代码错误，可以用catch获取异常
				try {
					let res = await usersPut(`users/${this.form.id}`, {
						id: this.form.id,
						email: this.form.email,
						mobile: this.form.mobile,
					});
					let { meta } = res.data;
					if (meta.status == 200) {
						this.$message.success(meta.msg);
						// 刷新表格数据
						this.getTableData();
						this.dialogFormVisible = false;
					} else {
						this.$message.error(meta.msg);
					}
				} catch (err) {
					console.log(err);
				}
			},
			// 上面通过作用域插槽把点击的哪一行的数据都传过来
			async del(row) {
				try {
					let {
						data: {
							meta: { msg, status },
						},
					} = await usersDelete("users/" + row.id);
					if (status == 200) {
						this.$message.success(msg);
						// 删除成功之后刷新列表
						this.getTableData();
					} else {
						this.$$message.error(msg);
					}
				} catch (err) {
					this.$$message.error(err);
				}
			},
			// 通过用户名搜索数据
			search() {
				// console.log(this.queryName)
				// 点击搜索，queryName已经通过v-modle进行修改，这边直接调接口，进行修改即可
				this.getTableData();
			},
			// 一页显示多少条
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				// 改变一页显示多少条
				this.pagesize = val;
				// 重新获取数据，渲染表格
				this.getTableData();
			},
			// 当前第几页
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getTableData();
			},
			// 组件传值
			addok() {
				// 重新获取用户数据
				this.getTableData();
				// 关闭抽屉
				setTimeout(() => {
					this.drawer = false;
				}, 600);
			},
			getTableData() {
				usersGet("users", {
					pagenum: this.currentPage,
					pagesize: this.pagesize,
					// 查询参数，通过用户名查询，空字符串是查询全部
					query: this.queryName,
				})
					.then((res) => {
						let { data, meta } = res.data;
						if (meta.status == 200) {
							this.tableData = data.users;
							// 把数据中的总数据给到total
							this.total = data.total;
						} else {
							this.$$message.err(meta.msg);
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},
		},
	};
</script>

<style>
</style>